import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar';
import config from '@/config';
import { cn } from '@/lib/utils';
import { useTemuStore } from '@/store/temu';
import { Settings } from 'lucide-react';

export interface OperationItem {
  label: string;
}

type Props = {
  children?: React.ReactNode;
  className?: string;
};

export const temuOperationList: OperationItem[] = [
  {
    label: '同步库存',
  },
  {
    label: '报名活动',
  },
];

export default function OperationType({ children, className, ...props }: Props) {
  const currentTabValue = useTemuStore((state) => state.currentTabValue);
  const dispatch = useTemuStore((state) => state.dispatch);

  return (
    <SidebarProvider
      className="w-auto relative"
      style={{
        // @ts-ignore
        '--sidebar-width': '15em',
      }}
    >
      <SidebarTrigger
        title="折叠/展开"
        className="absolute transition-[left] left-0 z-50 top-2 !cursor-pointer group-has-[[data-collapsible=offcanvas]]/sidebar-wrapper:left-[-1.6em]"
      ></SidebarTrigger>
      <div className="bd-gray rounded-lg mr-2 overflow-hidden flex">
        <div className={cn(className, 'relative')} {...props}>
          <Sidebar variant="sidebar" className="h-[100%] absolute w-full">
            <SidebarHeader className=" ">
              <div className="flex items-center flex-row">
                <div className="ml-5 flex items-center flex-row text-lg">操作</div>
                <div className="ml-auto mr-1">
                  <Settings
                    className={`cursor-pointer ${currentTabValue === config.temuAvailableSettingsTabValue ? 'text-primary' : ''}`}
                    size={15}
                    onClick={() => {
                      dispatch({
                        type: 'update',
                        update(draftState) {
                          draftState.currentTabValue = config.temuAvailableSettingsTabValue;
                        },
                      });
                    }}
                  ></Settings>
                </div>
              </div>
            </SidebarHeader>
            <SidebarContent className="px-4">
              <SidebarMenu
                className="gap-0"
                style={{
                  position: 'relative',
                }}
              >
                {temuOperationList.map((operationItem, index) => {
                  return (
                    <SidebarMenuItem className="flex items-center mt-2" key={operationItem.label}>
                      <div className="whitespace-nowrap flex items-center">
                        <div
                          onClick={() => {
                            // console.log(productCategoryInfo.categoryName);
                            dispatch({
                              type: 'update',
                              update(draftState) {
                                draftState.currentTabValue = operationItem.label;
                              },
                            });
                          }}
                          className={`text-sm select-text cursor-pointer ${currentTabValue === operationItem.label ? 'text-primary' : ''}`}
                        >
                          {operationItem.label}
                        </div>
                      </div>
                    </SidebarMenuItem>
                  );
                })}
              </SidebarMenu>
            </SidebarContent>
          </Sidebar>
        </div>
      </div>
    </SidebarProvider>
  );
}
